<!-- 轮播图组件 -->
<template>
  <view class="carousel-container" :style="containerStyle">
    <swiper 
      class="carousel-swiper"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      :circular="circular"
      :indicator-dots="indicator === 'dot'"
      :current="currentIndex"
      @change="onSwiperChange"
    >
      <swiper-item 
        v-for="(item, index) in items" 
        :key="index" 
        @tap="onItemClick(item)"
      >
        <image 
          class="carousel-image" 
          :src="sheep.$url.cdn(item.imgUrl)" 
          mode="aspectFill"
        />
        <!-- 自定义指示器 -->
        <view v-if="indicator === 'custom'" class="custom-indicators">
          <view 
            v-for="(dot, dotIndex) in items" 
            :key="dotIndex"
            class="custom-dot"
            :class="{ 'active': currentIndex === dotIndex }"
          ></view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    // 轮播图类型
    type: {
      type: String,
      default: 'default'
    },
    // 指示器类型
    indicator: {
      type: String,
      default: 'dot',
      validator: (value) => ['dot', 'custom', 'none'].includes(value)
    },
    // 自动播放
    autoplay: {
      type: Boolean,
      default: true
    },
    // 播放间隔（毫秒）
    interval: {
      type: Number,
      default: 3000
    },
    // 切换动画时长
    duration: {
      type: Number,
      default: 500
    },
    // 是否循环播放
    circular: {
      type: Boolean,
      default: true
    },
    // 轮播图数据
    items: {
      type: Array,
      default: () => []
    },
    // 容器样式
    style: {
      type: Object,
      default: () => ({})
    }
  });

  const emits = defineEmits(['itemClick', 'change']);

  // 当前轮播图索引
  const currentIndex = ref(0);

  // 容器样式
  const containerStyle = computed(() => ({
    backgroundColor: props.style.bgColor || '#fff',
    marginBottom: props.style.marginBottom || 0,
    height: props.style.height || '500rpx',
    borderRadius: props.style.borderRadius || '0',
    ...props.style
  }));

  // 轮播图切换事件
  const onSwiperChange = (e) => {
    currentIndex.value = e.detail.current;
    emits('change', { current: currentIndex.value });
  };

  // 轮播图点击事件
  const onItemClick = (item) => {
    emits('itemClick', item);
    if (item.url) {
      sheep.$router.go(item.url);
    }
  };
</script>

<style lang="scss" scoped>
.carousel-container {
  position: relative;
  overflow: hidden;

  .carousel-swiper {
    width: 100%;
    height: 100%;

    .carousel-image {
      width: 100%;
      height: 100%;
    }
  }

  // 自定义指示器样式
  .custom-indicators {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16rpx;
    z-index: 999;

    .custom-dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transition: all 0.3s ease;

      &.active {
        background: #ffffff;
        transform: scale(1.2);
      }
    }
  }
}
</style>
